

<template>
    <view class="groupMembers">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="position:fixed;z-index:100;background:#fff;width:750rpx;top:0;left:0;"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="position:fixed;z-index:100;border-bottom:none;"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">文章详情</view>
            <view class="right_box" @tap="openSt">
                <view class="st_btn" v-if="VER.ver">声明与文献</view>
			</view>
        </view>
        <scroll-view
            :scroll-y="true"
            class="content"
            @scroll="onScroll"  :scroll-top="scroll_top" :scroll-with-animation="true"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >   

            <view class="title d-flex">
                <view v-if="articleDetail.isSystem" class="guanfang">
                    <text class="text">官方</text>
                </view>
                <text v-if="articleDetail.isSystem">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
                {{articleDetail.title}}
            </view>

            <view class="desp d-flex j-between">
                <view class="d-flex a-center">
                    作者:{{articleDetail.userId}}
                    <text style="margin-left:20rpx;">{{formatTime(articleDetail.createTime)}}</text>
                </view>

                <view class="d-flex a-center">
                    <i style="font-size:34rpx;margin-right:8rpx;" class="icon icon-yanjing-"></i>
                    {{Number(articleDetail.pageView)||'1'}}
                </view>
            </view>

            <view class="article_container">
                <!-- <view v-html="articleDetail.nodes"></view> -->
                <rich-text :nodes="articleDetail.nodes"></rich-text>
            </view>

            <view class="heightBox"></view>

             <!-- <view class="d-flex a-center j-center" style="margin-top:50rpx;"><tm-button class="btn_main" :width="680" :shadow="-1" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="SetGroupMemberNameCard" label="确认修改"></tm-button></view> -->
        </scroll-view>

        <statement ref="stPopup"></statement>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive,nextTick } from "vue";
import { onReady, onShow, onLoad,onUnload,onPageScroll } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getArticleDetail} from "@/api/api";
import { setGroupMemberNameCard } from "@/hooks/imHooks";
import { config as configStore } from "@/store/config";
import { checkSwear } from "@/utils/utils"
import moment from "moment";
import { readArticle } from "@/store/readArticle"
import statement from "@/components/statement.vue";
import { ver } from "@/store/ver";
const VER = ver();
const stPopup = ref(null);
const openSt = ()=>{
    stPopup.value.open();
    
}
const scroll_top = ref(1);

onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if(res.scrollTop===0){
        backTop();
        setTimeout(()=>{
            uni.pageScrollTo({scrollTop:100});
        },100)
    }
});

const backTop = ()=>{
    scroll_top.value = 1;
    nextTick(()=>{
        scroll_top.value = 0;
    })
}


const readArticleStore = readArticle();

const formatTime = (time:any)=>{
    return moment(time).format("YYYY-MM-DD")
}


const groupId = ref('')

const articleDetail = ref({});

const goBack = () => {
    uni.navigateBack();
};

const checkNick = ()=>{
    checkSwear(nickName.value,true)
}


const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const bool = ref(false);
const updateLoading = ref(false);

const nickName = ref('');

const checkLength = (maxLength:number)=>{
    let content = nickName.value.trim();
    let str = ''
    let len=0;
    for(var i=0; i<content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len+=2;
        } else {
            len++;
        }

        if(len<=maxLength){
            str+=content[i];
        }
    }
    nextTick(() => {
        nickName.value = str;
    })
}




const SetGroupMemberNameCard = async()=>{
    if(updateLoading.value){
        return;
    }

    if(!checkSwear(nickName.value)){
        uni.showToast({
            icon: "none",
            title: "昵称包含敏感词,请重新输入",
            duration: 1500,
        });
        return;
    }

    updateLoading.value = true;
    uni.showLoading();
    const res:any = await setGroupMemberNameCard({groupID:groupId.value,userID:userData.id,nameCard:nickName.value});
    const { code,data } = res;
    console.log(res);
    updateLoading.value = false;
    if(code!==0){
        uni.hideLoading();
        uni.showToast({
            icon: "none",
            title: '修改群昵称失败,请稍后再试',
            duration: 1500,
        });
        return;
    }

    setTimeout(()=>{
        uni.hideLoading();
        uni.showToast({
            icon: "none",
            title: '修改成功',
            duration: 1500,
        });
        goBack();
    },500)

}

const GetArticleDetail = async(id:any)=>{
    const res = await getArticleDetail({id})
    const nodes = `<div class="ql-container ql-editor">${res.data.content}</div>`

    readArticleStore.setRead(`${res.data.type}-${res.data.id}`);
    res.data.nodes = nodes;
    articleDetail.value = res.data;




}


onReady(() => {});

onLoad((option: any) => {
    setTimeout(() =>{
        uni.pageScrollTo({scrollTop:100});
    },100)
    GetArticleDetail(option.id);
});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss">
@import url('@/assets/scss/quill.scss');
</style>

<style lang="scss" scoped>

.groupMembers{
    width: 750rpx;
    height: calc(100vh + 1px);
    background:#fff;

    .btn_main{
        border-radius: 50rpx;
    }
    .content{
        position:fixed;
        width:750rpx;
        left:0;
        right:0;
        padding-top:20rpx;
        background:#fff;
        bottom:0;
        .title{
            position:relative;
            padding:0 40rpx;
            font-size: 32rpx;
            font-weight: 600;
            color: #333333;
            line-height: 50rpx;
        }

        .desp{
            padding:0 40rpx;
            font-size:24rpx;
            color:#999;
            height:80rpx;

        }

        .guanfang{
                position: absolute;
                top:7rpx;
                left:40rpx;
                width: 60rpx;
                height: 32rpx;
                background: #D2F4E9;
                border-radius: 4rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left:8rpx;



                .text{
                    font-size:20rpx;
                    color:#1DC691;
                }
            }
    }

    .heightBox {
        height: env(safe-area-inset-bottom);
        min-height: 50rpx;
    }

}
</style>
